import React from "react";
import BaseScreen from "../BaseScreen";
import ProgressView from "../../view/ProgressView";
import { Actions, NameSpace } from "../../model/taskModel";
import { connect } from "react-redux";
import styles from "../../css/attendance.module.css";
import { locationTo,back } from "../../utils/LocationUtil";
import * as locations from '../../const/locations'
import { MyButton } from "../../view/MyButton";
import Config from "../../Config";
import DatePanel from "../components/Picker/DatePanel"
import Textarea from '../components/TextArea'
import UploadImgs from '../components/UploadImgs'
import { applySupplementCard } from '../../service/AttendService'
import { getTOKEN } from "../../utils/StorageUtil";
import { HintDialog } from '../../view/Dialog'
import { filterImgs } from '../../utils/CommomUtil'
class RecardScreen extends BaseScreen {
  constructor(props) {
    super(props)
    this.state = {
      itemSelected:'请选择班次',
      panelOpen: false,
      reason:'',
      loading: false 
    }
  }
  componentDidMount() {
    document.title = '补卡申请'
  }
  getReason=(e)=>{
      this.setState({
        reason:e
      })
  }
  confirm=()=>{
    
    const { imgs } = this.refs
    const { imgList } = imgs.state
    const {SelectBanci} = this.props
    const { reason} = this.state
    if(SelectBanci===null){
      this.showMsgDialog('请先选择班次')
    } else if(reason===''){
      this.showMsgDialog('请填写漏打卡原因')
    } else{
      this.setState({ loading: true });
      
      applySupplementCard({     
        token:getTOKEN(),
        record_type:SelectBanci.cn_type,
        record_id:SelectBanci.id,
        reason:this.state.reason,
        photo_arr: filterImgs(imgList),
        
      })
      .then(
        res=>{
          this.setState({ loading: false });          
          if(res.error_code===0){
            this.refs.summit.setState({
              content: '提交成功',
              visibility: true
            });
          }
          if(res.error_code===308){
            this.refs.summit.setState({
              content: '您已经提交过了',
              visibility: true
            });
          }
          if(res.error_code===310){
            this.refs.summit.setState({
              content: '当前申请补卡时间已有打卡结果了',
              visibility: true
            });
          }
        }
      )
      .catch(
        err =>{
          console.log(err)
        }
      )
    }
   
  }
  
  render() {
    const {visibility} = this.state
    const {SelectBanci} = this.props
    return (
      <div className={styles["homes"]}>
        <div className={styles["attend_container"]}>
          <div className={styles["stat_item_w"]}>
            <div className={styles["stat_item_key"]}>
              选择班次
            </div>
            <div
              className={styles["stat_item_value"]}
              onClick={()=>locationTo(locations.CALENDAR)}
            >
              {SelectBanci&&
                <span>
                  {SelectBanci.year+'-'+SelectBanci.month+'-'+SelectBanci.date+' '+SelectBanci.time}
                </span>
              }
              {!SelectBanci&&
                '请选择班次'
              }
            </div>
          </div>
          {/* <DatePanel
            show={this.state.panelOpen}
            onCancel={() => this.setState({ panelOpen: false })}
            onConfirm={value => {
              this.setState({ itemSelected: value.pass, panelOpen: false });
            }}
            minYear={parseInt(new Date().getFullYear(), 10)}
            maxYear={parseInt(new Date().getFullYear(), 10) + 1}
          /> */}
        </div>
        <div className={styles["attend_container"]}>
          <div className={styles["stat_item_w"]}>
            <div className={styles["stat_item_borderBottom"]}>
            <div className={styles["stat_item_key"]}>
             <span style={{color:'red'}}>*</span>  原因
            </div>
            </div>
          </div>
          <div className={styles["attend_item_w"]} style={{ minHeight: '80px' }}>
            <Textarea
            onChange={this.getReason}
            placeholder=''
            />
          </div>
        </div>
        <div className={styles["attend_container"]}>
          <div className={styles["stat_item_w"]}>          
            <div className={styles["stat_item_borderBottom"]}>
            <div className={styles["stat_item_key"]}>
             图片
            </div>
            </div>
          </div>
          <div className={styles["attend_item_w"]}>
            <UploadImgs ref='imgs' />
          </div>
        </div>
        <div className={styles['btn_wrapper']} style={{ padding: '120px 0 0' }}>
          <MyButton
            style={{
              width: '80%',
              borderRadius: '0.3rem'
            }}
            name={"确认提交"}
            onClick={() => {
              this.confirm();
            }}
          />
        </div>
        <HintDialog
          ref="dialog"
          style={{
            color: "#fff"
          }}
          visibility={this.state.alertMsg !== ""}
          content={this.state.alertMsg}
          operateText="确定"
        />
           <HintDialog
          ref="summit"
          style={{
            color: "#fff"
          }}
          visibility={this.state.alertMsg !== ""}
          content={this.state.alertMsg}
          operateText="确定"
          operateClick={() => { back() }}
        />
        <ProgressView visibility={this.state.loading} mode={ProgressView.MODE_MEDIUM} />
        
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    ...state[NameSpace]
  };
};

export default connect(mapStateToProps)(RecardScreen);


// export default RecardScreen